<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个django展示页面</title>
{#    <link rel="stylesheet" href="/static/css/index.css">#}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<h1>学生成绩简单可视化</h1>
<div id="chart" style="height: 300px"></div>

<script>
    {#初始化 echarts 对象#}
    var mychart = echarts.init(document.getElementById('chart'));
    {#可视化展示选项#}

    {#首先，声明两个 javascript 的数组#}
    var series_data = [];
    var xAxis_data = [];

    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
    {% for stu in objs %}
        series_data.push({{ stu.score }})
        xAxis_data.push('{{ stu.name}}')
    {% endfor %}

    var option = {
        xAxis: {
            type: 'category',
            data: xAxis_data
                // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: series_data,
                // [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    {#将 echarts对象与展示选项结合起来#}
    mychart.setOption(option);

</script>
</body>
</html>
